<template>
  <div class="upload-form-container">
    <form @submit.prevent="submitForm" class="upload-form">
      <div class="form-group">
        <label for="music">音乐文件：</label>
        <input required type="file" ref="musicInput" @change="handleMusicChange" />
      </div>
      <div class="form-group">
        <label for="cover">封面文件：</label>
        <input required accept="image/png" type="file" ref="coverInput" @change="handleCoverChange" />
      </div>
      <div class="form-group">
        <label for="name">歌曲名称：</label>
        <input required type="text" v-model="formData.name" />
      </div>
      <div class="form-group">
        <label for="musician">音乐家：</label>
        <input required type="text" v-model="formData.musician" />
      </div>
      <div class="form-group">
        <label for="album">专辑：</label>
        <input required type="text" v-model="formData.album" />
      </div>
      <button type="submit" class="submit-button">上传</button>
    </form>
  </div>
</template>
<style scoped>
.upload-form-container {
  width: 473px;
  margin: 50px auto 0;
}

.upload-form {
  padding: 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
  width: 433px;
  box-sizing: border-box;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"],
input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 5px;
}

.submit-button {
  padding: 8px 17px;
  background-color: #ff8e76;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #ff8369;
}
</style>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";

const musicInput = ref(null);
const coverInput = ref(null);
const formData = ref({
  name: '',
  musician: '',
  album: ''
});


const handleMusicChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const allowedTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/flac'];  // 常见音频格式
    if (!allowedTypes.includes(file.type)) {
      ElMessage.error('请选择音频文件')
      event.target.value = null;  // 清空选择
      return;
    }
    if (file.size > 50 * 1024 * 1024) {  // 50MB 转换为字节
      ElMessage.error('音乐文件大小不能超过 50MB');
      event.target.value = null;  // 清空选择
      return;
    }
  }
};

const handleCoverChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];  // 常见图片格式
    if (!allowedTypes.includes(file.type)) {

      ElMessage.error('请选择图片文件')
      event.target.value = null;  // 清空选择
      return;
    }
    if (file.size > 20 * 1024 * 1024) {  // 20MB 转换为字节
      ElMessage.error('封面文件大小不能超过 20MB')

      event.target.value = null;  // 清空选择
      return;
    }
  }
};
const submitForm = async () => {
  const jsonData = {
    name: formData.value.name,
    musician: formData.value.musician,
    album: formData.value.album
  }
  const form = new FormData();
  form.append('music', formData.music);
  form.append('cover', formData.cover);
  form.append('jsonData', JSON.stringify(jsonData));

  const url = '/music/upload'

  axios({
    method: 'post',
    url: url,
    data: form,
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  }).then((res)=>{
    if (res.data.flag) {
      ElMessage.success("添加成功")


    } else {
      console.log(res.data.message)
    }
  })
  .catch(err => {
    console.log(err.data)
  })


};
</script>
<!--<template>-->
<!--  <div>-->
<!--    <input type="file" @change="handleInputChange" ref="fileInput" />-->
<!--    <button @click="handleUpload">上传</button>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->

<!--import axios from "axios";-->

<!--function uploadFiles() {-->
<!--  const musicFile = document.getElementById('music').files[0];-->
<!--  const coverFile = document.getElementById('cover').files[0];-->
<!--  const jsonData = {-->

<!--  };-->

<!--  const formData = new FormData();-->
<!--  formData.append('music', musicFile);-->
<!--  formData.append('cover', coverFile);-->
<!--  formData.append('jsonData', JSON.stringify(jsonData));-->

<!--  const url = "/music/upload"-->
<!--  axios.post('url', formData, {-->
<!--    headers: {-->
<!--      'Content-Type': 'multipart/form-data',-->
<!--    },-->
<!--  })-->
<!--  .then(response => {-->
<!--    console.log(response);-->
<!--  })-->
<!--  .catch(error => {-->
<!--    console.error(error);-->
<!--  });-->
<!--}-->
<!--</script>-->
